<template>
	<view class="parentBox" :style="{height:height}">
		<swiper class="swiper" :duration="duration" :circular="circular" :next-margin="listData.length>2?newNextMargin:'0rpx'">
			<swiper-item style="margin:0;!important" v-for="(item,index) in listData" :key="index">
				<view class="swiper-item" v-if="Array.isArray(item)">
					<view class="novelLists" :style="{height:listHeight}" v-for="(child,childIndex) in item"
						:key="childIndex">
						<slot :data="{index,childIndex,data:child}"></slot>
					</view>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		name: "hbhSwiperComponent",
		props: {
			height: {
				type: String,
				default: '300rpx'
			},
			duration: {
				type: Number,
				default: 500
			},
			nextMargin: {
				type: String,
				default: '0rpx'
			},
			listHeight: {
				type: String,
				default: '90rpx'
			},
			circular: {
				type: Boolean,
				default:true
			},
			listData: {
				type: Array,
				default: () => {
					return []
				}
			}
		},
		data() {
			return {
				newNextMargin: this.nextMargin
			};
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.parentBox {
		padding: 20rpx;
		box-sizing: border-box;

		.swiper {
			height: 100%;
			position: relative;
			.swiper-item {
				display: flex;
				flex-direction: column;
				height: 100%;
				padding: 20rpx;
				margin-right: 10rpx;
				box-sizing: border-box;
				.novelLists {
					display: flex;
					margin-bottom: 10rpx;
				}

				.novelLists:last-child {
					margin-bottom: 0rpx;
				}
			}

		}

		.swiper::before {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 999;
			box-shadow: 10rpx 0rpx 10rpx 10rpx #fff inset;
			pointer-events: none;
		}

		.swiper::after {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 999;
			box-shadow: -10rpx 0rpx 10rpx 10rpx #fff inset;
			pointer-events: none;
		}
	}
</style>